<template>
  <div class="dashboard-container">
    <!-- 顶部标题和导航 -->
    <div class="page-header">
      <div class="page-title">社区安全管理大屏</div>
      <div class="nav-buttons">
        <el-button type="primary" @click="goToFrontend" size="large">
          <i class="el-icon-monitor"></i>
          进入前台监控
        </el-button>
        <el-button type="success" @click="goToBackend" size="large">
          <i class="el-icon-setting"></i>
          后台管理
        </el-button>
      </div>
    </div>

    <!-- 数据概览区域 -->
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-title">今日总出入量</div>
        <div class="stat-value">{{ totalCount }}</div>
        <div class="stat-trend">
          <span class="trend-up">↑ 12.5%</span>
          <span class="trend-text">较昨日</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">车辆出入数</div>
        <div class="stat-value">{{ vehicleCount }}</div>
        <div class="stat-trend">
          <span class="trend-up">↑ 8.3%</span>
          <span class="trend-text">较昨日</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">人员出入数</div>
        <div class="stat-value">{{ peopleCount }}</div>
        <div class="stat-trend">
          <span class="trend-down">↓ 2.1%</span>
          <span class="trend-text">较昨日</span>
        </div>
      </div>
    </div>

    <!-- 出入量趋势图表 -->
    <div class="chart-row">
      <div class="chart-card">
        <div class="chart-title">近7日出入量趋势</div>
        <v-chart class="chart-container" :option="chartOption" autoresize />
      </div>
    </div>

    <!-- 安全隐患列表 -->
    <div class="table-card">
      <div class="table-title">安全隐患列表</div>
      <table class="safety-table">
        <thead>
          <tr>
            <th>编号</th>
            <th>管理员</th>
            <th>类型</th>
            <th>状态</th>
            <th>上报时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="hazard in safetyHazards" :key="hazard.id">
            <td>{{ hazard.id }}</td>
            <td>{{ hazard.amName }}</td>
            <td>{{ getTypeName(hazard.stName) }}</td>
            <td>
              <span class="status-tag" :class="getStatusTagClass(hazard.state)">{{ hazard.state==1?"未处理":"已处理" }}</span>
            </td>
            <td>{{ hazard.createTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { getRequest } from '@/utils/request';

// 注册ECharts组件
echarts.use([LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);

export default {
  components: {
    VChart
  },
  data() {
    return {
      // 统计数据
      totalCount: 1286,
      vehicleCount: 358,
      peopleCount: 928,
      // 图表数据
      chartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: ['总出入量', '车辆出入', '人员出入'],
          textStyle: {
            color: '#a0d9ff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15'],
          axisLine: {
            lineStyle: {
              color: '#a0d9ff'
            }
          },
          axisLabel: {
            color: '#a0d9ff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#a0d9ff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(160, 217, 255, 0.2)'
            }
          },
          axisLabel: {
            color: '#a0d9ff'
          }
        },
        series: [
          {
            name: '总出入量',
            type: 'line',
            data: [980, 1050, 1120, 1080, 1180, 1250, 1286],
            smooth: true,
            itemStyle: {
              color: '#1890ff'
            },
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(24, 144, 255, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
                { offset: 1, color: 'rgba(24, 144, 255, 0)' }
              ])
            }
          },
          {
            name: '车辆出入',
            type: 'line',
            data: [280, 310, 330, 300, 340, 350, 358],
            smooth: true,
            itemStyle: {
              color: '#00bfff'
            },
            lineStyle: {
              width: 3
            }
          },
          {
            name: '人员出入',
            type: 'line',
            data: [700, 740, 790, 780, 840, 900, 928],
            smooth: true,
            itemStyle: {
              color: '#87cefa'
            },
            lineStyle: {
              width: 3
            }
          }
        ]
      },
      safetyHazards: [
        // { id: 'SH001', location: '1号门消防通道', type: '消防隐患', status: '未处理', reportTime: '2023-06-15 09:23' },
      ],
      securityThreatTypes: [] // 新增：安全隐患类别列表
    };
  },
  created() {
    // 页面加载时获取安全隐患类别
    this.fetchSecurityThreatTypes();
    this.fetchSafetyHazards();
  },
  methods: {
    // 获取安全隐患类别
    fetchSecurityThreatTypes() {
      getRequest('/securityThreat/getSecurityThreatList').then(res => {
        if (res.data && Array.isArray(res.data.data)) {
          this.securityThreatTypes = res.data.data;
        }
      });
    },
    // 获取安全隐患列表（假设后端有接口，若无可用mock数据）
    fetchSafetyHazards() {
      // 这里假设有接口 /reportSafetyHazards/getReportSafetyHazardsList
      getRequest && getRequest('/reportSafetyHazards/getReportSafetyHazardsList').then(res => {
        if (res.data && Array.isArray(res.data.data)) {
          this.safetyHazards = res.data.data;
        } else {
          // fallback: 保留原有静态数据
          this.safetyHazards = [
            { id: 'SH001', location: '1号门消防通道', type: '1', status: '未处理', reportTime: '2023-06-15 09:23' },
            { id: 'SH002', location: '3号楼电梯', type: '2', status: '处理中', reportTime: '2023-06-15 10:45' },
            { id: 'SH003', location: '地下车库B区', type: '3', status: '已处理', reportTime: '2023-06-14 16:10' },
            { id: 'SH004', location: '中心广场照明', type: '4', status: '未处理', reportTime: '2023-06-15 14:30' },
            { id: 'SH005', location: '2号门门禁', type: '5', status: '处理中', reportTime: '2023-06-15 11:18' }
          ];
        }
      });
    },
    // 根据type id获取类别名称
    getTypeName(typeId) {
      const found = this.securityThreatTypes.find(item => String(item.id) === String(typeId));
      return found ? (found.stName || found.name || found.typeName || typeId) : typeId;
    },
    // 根据状态获取标签类名
    getStatusTagClass(status) {
      switch (status) {
        case '1': return 'status-tag-danger';
        // case '处理中': return 'status-tag-warning';
        case '2': return 'status-tag-success';
        default: return 'status-tag-info';
      }
    },
    goToFrontend() {
      this.$router.push('/frontend/community');
    },
    goToBackend() {
      this.$router.push('/backManager');
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #0a192f;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #a0d9ff;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  text-shadow: 0 0 10px rgba(160, 217, 255, 0.5);
}

.nav-buttons {
  display: flex;
  gap: 10px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  flex-basis: 32%;
  background: linear-gradient(135deg, rgba(160, 217, 255, 0.1) 0%, rgba(160, 217, 255, 0.2) 100%);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(160, 217, 255, 0.2);
  overflow: hidden;
  padding: 20px;
}

.stat-title {
  font-size: 16px;
  color: #a0d9ff;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #1890ff;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
}

.stat-trend {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.trend-up {
  color: #ff6347;
  font-weight: bold;
  margin-right: 10px;
  text-shadow: 0 0 10px rgba(255, 99, 71, 0.5);
}

.trend-down {
  color: #32cd32;
  font-weight: bold;
  margin-right: 10px;
  text-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

.trend-text {
  color: #a0d9ff;
  font-size: 14px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  background: rgba(10, 25, 47, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(160, 217, 255, 0.2);
  overflow: hidden;
  padding: 20px;
}

.chart-title {
  font-size: 16px;
  color: #a0d9ff;
  margin-bottom: 10px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.table-card {
  background: rgba(10, 25, 47, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(160, 217, 255, 0.2);
  overflow: hidden;
  padding: 20px;
}

.table-title {
  font-size: 16px;
  color: #a0d9ff;
  margin-bottom: 10px;
}

.safety-table {
  width: 100%;
  border-collapse: collapse;
}

.safety-table th,
.safety-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(160, 217, 255, 0.2);
  color: #a0d9ff;
  text-align: left;
}

.safety-table th {
  background-color: rgba(160, 217, 255, 0.1);
}

.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-tag-danger {
  background-color: #ff6347;
  color: #fff;
}

.status-tag-warning {
  background-color: #ffc107;
  color: #fff;
}

.status-tag-success {
  background-color: #32cd32;
  color: #fff;
}

.status-tag-info {
  background-color: #17a2b8;
  color: #fff;
}
</style>